<form [formGroup]="form">
  <div class="form-group">
    <label for="oldPassword">Old Password</label>
    <input 
    formControlName="oldPassword"
    type="text" id="oldPassword" class="form-control">
    <div class="alert alert-danger" *ngIf="oldPassword.touched && oldPassword.invalid">
      <div *ngIf="oldPassword.errors.required">Old password is required.</div>
      <div *ngIf="oldPassword.errors.oldpassworldValid">Old password is not valid.</div>
    </div>
  </div>
  <div class="form-group">
    <label for="newPassword">New Password</label>
    <input 
    formControlName="newPassword"
    type="text" id="newPassword" class="form-control">
    <div class="alert alert-danger" *ngIf="newPassword.touched && newPassword.invalid">
      <div *ngIf="newPassword.errors.required">New Password is required.</div>
      <div *ngIf="newPassword.errors.minlength">New Password length should be {{ newPassword.errors.minlength.requiredLength }} charactors.</div>
    </div>
  </div>
  <div class="form-group">
    <label for="rePassword">Confirm Password</label>
    <input 
    formControlName="rePassword"
    type="text" id="rePassword" class="form-control">
    <div class="alert alert-danger" *ngIf="rePassword.touched && rePassword.invalid">
      <div *ngIf="rePassword.errors.required">Confirm password id required.</div>
    </div>
    <div 
    class="alert alert-danger"
    *ngIf="rePassword.valid && form.invalid && form.errors.rePasswordValid">Confirm password invalid.</div>
  </div>
  <button class="btn btn-primary">Change Password</button>
</form>